<template>
  <div class="account-settings-info-view">
    <a-row :gutter="16" type="flex" justify="center">
      <a-col :order="1" :md="12" :lg="15">
        <a-form layout="vertical">
          <a-form-item
              label="真实姓名"
          >
            <a-input placeholder="请输入你的真实姓名" v-model="user.realName" />
          </a-form-item>
          <a-form-item
              label="用户名"
          >
            <a-input placeholder="请输入你的用户名" v-model="user.loginName"/>
          </a-form-item>
          <a-form-item
              label="手机号"
          >
            <a-input placeholder="请输入你的手机号" v-model="user.phone"/>
          </a-form-item>
          <a-form-item
              label="地址"
              :required="false"
          >
            <a-input placeholder="请输入邮箱地址" v-model="user.address"/>
          </a-form-item>
          <a-form-item label="性别">
            <a-radio-group v-model="user.sex">
              <a-radio :value="1">
                男
              </a-radio>
              <a-radio :value="0">
                女
              </a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="职业">
            <a-select v-model="user.occupation" style="width: 120px">
              <a-select-option v-for="occ in occuList" :key="occ.occuId" :value="occ.occuId">
                {{occ.occuName}}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="标签">
            <div>
              <template v-for="(tag, index) in user.userLabel || []">
                <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
                  <a-tag :key="tag" :closable="true" @close="() => handleClose(tag)">
                    {{ `${tag.slice(0, 20)}...` }}
                  </a-tag>
                </a-tooltip>
                <a-tag v-else :key="tag" :closable="true" @close="() => handleClose(tag)">
                  {{ tag }}
                </a-tag>
              </template>
              <a-input
                  v-if="inputVisible"
                  ref="input"
                  type="text"
                  size="small"
                  :style="{ width: '78px' }"
                  :value="inputValue"
                  @change="handleInputChange"
                  @blur="handleInputConfirm"
                  @keyup.enter="handleInputConfirm"
              />
              <a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput">
                <a-icon type="plus" /> 添加
              </a-tag>
            </div>
          </a-form-item>

          <a-form-item
              label="个人签名"
          >
            <a-textarea rows="4" v-model="user.autoGraph" placeholder="请输入你的签名"/>
          </a-form-item>

          <a-form-item>
            <a-button type="primary" @click="submitHandler">更新基本信息</a-button>
          </a-form-item>
        </a-form>

      </a-col>
      <a-col :order="1" :md="24" :lg="8" :style="{ minHeight: '180px' }">
        <div class="ant-upload-preview" @click="$refs.modal.edit(1)" >
          <a-icon type="cloud-upload-o" class="upload-icon"/>
          <div class="mask">
            <a-icon type="plus" />
          </div>
          <img :src="user.avator"/>
        </div>
      </a-col>
    </a-row>

    <avatar-modal ref="modal" @ok="setavatar"/>

  </div>
</template>

<script>
import AvatarModal from './AvatarModal'
import { getMyInfo,updateInfo } from '@/api/user'
import {getOccuList} from "@/api/occu";
export default {
  components: {
    AvatarModal
  },
  data () {
    return {
      tags: [],
      inputVisible: false,
      inputValue: '',
      user:{},
      occuList:[]
    }
  },
  mounted() {
    // 加载职业列表
    this.loadOccuList();
    // 加载用户数据
    this.loadUserInfo();
  },
  methods: {
    // 更新
    async submitHandler(){
      const result = await updateInfo(this.user);
      if (result.code === 200){
        this.$router.replace("/admin/myinfo");
        this.$message.success(result.msg);
      } else{
        this.$message.error(result.msg);
      }
    },
    // 加载职业数据
    async loadOccuList(){
      const result = await getOccuList();
      const {code,data,msg} = result;
      if (code === 200){
        this.occuList = data;
      } else {
        this.$message.error(msg);
      }
    },
    // 移除标签
    handleClose(removedTag) {
      const tags = this.user.userLabel.filter(tag => tag !== removedTag);
      this.user.userLabel = tags;
    },

    // 添加标签按钮是否显示
    showInput() {
      this.inputVisible = true;
      this.$nextTick(function() {
        this.$refs.input.focus();
      });
    },

    // 手动输入标签名改变事件
    handleInputChange(e) {
      this.inputValue = e.target.value;
    },

    // 回车或失去焦点添加标签
    handleInputConfirm() {
      const inputValue = this.inputValue;
      let tags = this.user.userLabel || [];
      // 有值并且第一次
      if (inputValue && tags.indexOf(inputValue) === -1) {
        tags = [...tags, inputValue];
      }
      this.inputVisible = false;
      this.inputValue = '';
      this.user.userLabel = tags;
    },
    // 子组件上传完成后更新图片
    setavatar (url) {
      this.user.avator = url
    },

    // 加载用户信息
    async loadUserInfo(){
      const result = await getMyInfo();
      const { code,data,msg } = result;
      if (code === 200){
        this.user = data;
      } else {
        this.$message.error(msg);
      }
    }
  }
}
</script>

<style lang="less" scoped>

.avatar-upload-wrapper {
  height: 200px;
  width: 100%;
}

.ant-upload-preview {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 180px;
  border-radius: 50%;
  box-shadow: 0 0 4px #ccc;

  .upload-icon {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 1.4rem;
    padding: 0.5rem;
    background: rgba(222, 221, 221, 0.7);
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.2);
  }
  .mask {
    opacity: 0;
    position: absolute;
    background: rgba(0,0,0,0.4);
    cursor: pointer;
    transition: opacity 0.4s;

    &:hover {
      opacity: 1;
    }

    i {
      font-size: 2rem;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -1rem;
      margin-top: -1rem;
      color: #d6d6d6;
    }
  }

  img, .mask {
    width: 100%;
    max-width: 180px;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
  }
}
</style>
